<template>
  <div>
    <el-col :span="8">&nbsp;</el-col>
    <el-col :span="6">
      <el-card>
        <el-divider>用户登录</el-divider>
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
        >
          <el-form-item prop="userName" label="用户名">
            <el-input v-model="ruleForm.userName" type="text" clearable prefix-icon="el-icon-user"/>
          </el-form-item>
          <el-form-item prop="password" label="密码">
            <el-input v-model="ruleForm.password" type="password" clearable prefix-icon="el-icon-lock"/>
          </el-form-item>
          <el-form-item align="center">
            <el-button @click="login('ruleForm')" type="primary">登录</el-button>
            <el-button type="primary" @click="register">注册</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
    <el-drawer
      :append-to-body="true"
      :wrapperClosable="false"
      title="用户注册"
      :visible.sync="drawer"
      direction="rtl"
      :before-close="closeModalEvent"
    >
      <el-form
        :inline="true"
        label-width="90px"
        label-position="right"
        ref="registerForm"
        :model="registerForm"
        :rules="rules"
      >
        <el-form-item prop="userName" label="用户名" align="center">
          <el-input v-model="registerForm.userName" clearable placeholder="请输入用户名..."/>
        </el-form-item>
        <el-form-item prop="password" label="密码" align="center">
          <el-input v-model="registerForm.password" clearable placeholder="请输入密码..." type="password"/>
        </el-form-item>
        <el-form-item align="center">
          <el-button type="primary" @click="register('registerForm')">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import {login, register} from '@/api/user'
import {getTokenKey, setToken, removeToken} from '@/utils/auth'
import {getAppUrl} from '@/api/app'

export default {
  name: "login",
  data() {
    return {
      drawer: false,
      registerForm: {
        userName: '',
        password: ''
      },
      ruleForm: {
        userName: '',
        password: ''
      },
      rules: {
        userName: [
          {required: true, message: '用户名称不能为空', trigger: 'change'}
        ],
        password: [
          {required: true, message: '密码不能为空', trigger: 'change'}
        ]
      }
    }
  },
  methods: {
    login(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          login({
            "userName": this.ruleForm.userName,
            "password": this.ruleForm.password
          }).then((r) => {
            setToken(r.token)

            var appId = this.$route.query.appId;
            if (appId) {
              getAppUrl(appId).then((res) => {
                if (res) {
                  location.href = res
                } else {
                  removeToken()
                  this.$message.error('当前应用已下线,暂不可使用')
                }
              })
            } else {
              this.$message.success('登录成功！欢迎您' + r.userName);
              this.$router.push('/index')
            }
          })
        }
      })
    },
    register(formName) {
      this.drawer = true;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          register({
            "userName": this.registerForm.userName,
            "password": this.registerForm.password
          }).then(() => {
            this.$message.success('恭喜你注册成功')
            this.closeModalEvent()
          });
        }
      })
    },
    closeModalEvent() {
      this.$refs.registerForm.resetFields();
      this.drawer = false;
    }
  }

}
</script>

<style scoped>
</style>
